<head>
	<%= stylesheet_link_tag 'user/people' %>


    <script type="text/javascript">

    var chart;
	$(document).ready(function(){
				  // Set up the chart
       RenderChart("#tab1");    

    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();




    function RenderChart(id){
    	if(id=="#tab1"){
 			chart = new Highcharts.Chart({
   			     chart: {
   			         renderTo: 'chart1',
   			         type: 'column',
   			         margin: 75,
   			         options3d: {
   			             enabled: true,
   			             alpha: 15,
   			             beta: 15,
   			             depth: 50,
   			             viewDistance: 25
   			         }
   			     },
   			     title: {
   			         text: 'Chart rotation demo'
   			     },
   			     subtitle: {
   			         text: 'Test options by dragging the sliders below'
   			     },
   			     plotOptions: {
   			         column: {
   			             depth: 25
   			         }
   			     },
   			     credits: {
           			 enabled: false
      			 },
   			     series: [{
   			         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
   			     }]
   			 });
    	}
    	else if(id == "#tab2"){
    	   var year=2013;
    	   var month=0;
    	   var day=10;
    	   var person="Ray";
    	  $('#chart2').highcharts({
    	  	  chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Amount of Code Committed by '+person
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime',
                minRange: 14 * 24 * 3600000 // fourteen days
            },
            yAxis: {
                title: {
                    text: 'Lines of Code'
                }
            },
            legend: {
                enabled: false
            },
			credits: {
           	    enabled: false
      	    },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
    
            series: [{
                type: 'area',
                name: person,
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(year, month, day),
                data: [
                    0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258,
                    0.8283, 0.8278, 0.8256, 0.8292,    0.8239, 0.8239,    0.8245, 0.8265,    0.8261, 0.8269,
                    0.8273, 0.8244, 0.8244, 0.8172,    0.8139, 0.8146,    0.8164, 0.82,    0.8269, 0.8269,
                    0.8269, 0.8258, 0.8247, 0.8286,    0.8289, 0.8316,    0.832, 0.8333,    0.8352, 0.8357,
                    0.8355, 0.8354, 0.8403, 0.8403,    0.8406, 0.8403,    0.8396, 0.8418,    0.8409, 0.8384
                ]
            }]
           });


    	}
    	else if(id == "#tab3"){

    	}
    	else{
    		alert("Invalid RenderChart Id!");
    	}
    }


				  $('.txt_tab:gt(0)').css('display', 'none');

				  $('#menu ul li a').click(function(event){
				    event.preventDefault();
				    var id_tab = $(this).attr('href');
				    // alert(id_tab)
				    $('#menu ul li a').removeClass('hover_tab');
				    $(this).addClass('hover_tab');
				    $('div.txt_tab:visible').hide();
				    // $(id_tab).show('slide',f1);
 					$( id_tab ).show( 0, function() {
 						chartdiv=$(id_tab).children();
 						// alert(chartdiv.attr('id'));
 						if(typeof chartdiv.highcharts() != 'undefined')
 							chartdiv.highcharts().destroy();
 						RenderChart(id_tab);
 					 });
				  });


		});


// $(document).ready(function () {


// 		google.load("visualization", "1", {packages:["corechart"]});
// // });
// 		google.setOnLoadCallback(drawChart);


//       function drawChart() {
//         var line_data = google.visualization.arrayToDataTable([
//           ['Month', 'Ray'],
//           ['May',  500],
//           ['Jun',  550],
//           ['Jul',  525],
//           ['Aug',  600]
//         ]);

//         var line_options = {
//           title: 'Amount of Code Committed Every Month'
//         };

//         var line_chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
//         line_chart.draw(line_data, line_options);


//         // column chart
// 	    var column_data = google.visualization.arrayToDataTable([
// 	      ['Month', 'Kami'],
// 	      ['May',  80],
// 	      ['Jun',  90],
// 	      ['Jul',  75],
// 	      ['Aug',  99]
// 	    ]);


//         var column_options = {
// 		    title: 'Performance'
// 		    // hAxis: {title: 'Month', titleTextStyle: {color: 'red'}}
// 		  };

// 	    var column_chart = new google.visualization.ColumnChart(document.getElementById('column_chart_div'));  
// 	    column_chart.draw(column_data, column_options);

//       }






    </script>







		<script type="text/javascript">
$(function () {
  
});
		</script>
	</head>



<div id="container"></div>
<div id="sliders" style="display:none;">
	<table >
		<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
	    <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
	</table>
</div>



<div class="col-lg-12 col-md-12 col-xs-12" style="height:600px;">
	<div class="col-lg-3 col-md-3 col-xs-3">
		<div id="id123"></div>

		<div class="row" > 	
			<div class="login-form" tyle="height:600px;">
	            <div class="form-group">
	            	<h5>Ray(Intern)</h5>
	            	<i class="login-field-icon fui-user"></i>
	            </div>

	            <div class="form-group has-success">
		            <input type="text" value="Complete 3 tasks yesterday" disabled="disabled" class="form-control">
		            <span class="input-icon icon-ok-sign" style="color:#F1C40F;"></span>
		        </div>

		        <div class="form-group has-success">
		            <input type="text" value="Work 8 hours yesterday" disabled="disabled" class="form-control">
		            <span class="input-icon icon-time" style="color:#F1C40F;"></span>
		        </div>

		        <div style="height:320px;">
		            <h4>Ray's Network</h4>
		            	<nav class="circular-menu">
						  <div class="circle open">
						    <a href="" class="icon-github-sign icon-2x"><p>Harvest</p></a>
						    <a href="" class="icon-user icon-2x"><p>kami</p></a>
						    <a href="" class="icon-user icon-2x"><p>Jeremy</p></a>
						    <a href="" class="icon-user icon-2x"><p>Viki</p></a>
						    <a href="" class="icon-user icon-2x"><p>Herbert</p></a>
						    <a href="" class="icon-user icon-2x"><p>Eric</p></a>
						    <a href="" class="icon-group icon-2x"><p>Lab</p></a>
						    <a href="" class="icon-globe icon-2x"><p>PwC Us</p></a>
						  </div>
						  
						  <a href="" class="menu-button icon-spinner icon-spin icon-4x" style="color: #E67E22;"></a>

						</nav>

						<script type="text/javascript">
						// // Demo by http://creative-punch.net

							var items = document.querySelectorAll('.circle a');

							for(var i = 0, l = items.length; i < l; i++) {
							  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
							  
							  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
							}

							document.querySelector('.menu-button').onclick = function(e) {
							   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
							}

						</script>
		        </div>



          	</div>
		</div>
	</div>	

	<div class="col-lg-9 col-md-9 col-xs-9 ">

			<div id="menu">
			  <ul>
			    <li><a id="bb1" class="hover_tab tab1" href="#tab1">Amount of Code</a></li>
			    <li><a class="tab2" href="#tab2">Performance</a></li>
			    <li><a class="tab3" href="#tab3">Radar</a></li>
			  </ul>
			</div>
			<div style="clear:both"></div>
			<div id="txt_cont">
			  <div class="txt_tab" id="tab1">
			   	 <div id="chart1" style="width: 900px; height: 500px;"></div>
			  </div>

			  <div class="txt_tab" id="tab2">			   	
			     <div id="chart2" style="width: 900px; height: 500px;"></div>
			  </div>

			  <div class="txt_tab" id="tab3">
			  	 <div id="chart3" style="width: 900px; height: 500px;"></div>
			  </div>


			</div>




	</div>

</div>
